<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%--
  Created by IntelliJ IDEA.
  User: xin
  Date: 2021/12/26
  Time: 19:36
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>商品分类</title>
    <link rel="stylesheet" href="css/main.css">
</head>
<style>
    .main table tbody tr td{width:33%;}
    .main table thead tr th{width:33%;}

</style>
<script>
    function deleteButtonClick(id){
        let msg = "您确定要删除该商品分类吗？";
        if (confirm(msg)===true){
            window.location ="/Gradle___com_example___stroeBackstage_1_0_SNAPSHOT_war/toDelCategory?id="+id;
            return true;
        }else{
            return false;
        }
    }
    function updateButtonClick(id,name){
        let updateBox=document.getElementById("updateBox");
        updateBox.style.display = "block";
        let updateForm = document.getElementById("updateForm");
        updateForm.children.namedItem("id").value=id;
        updateForm.children.namedItem("name").value=name;
    }
    function addButtonClick(){
        let addBox=document.getElementById("addBox");
        addBox.style.display = "block";

    }
    function quit(box){
        box.style.display = "none";
    }
</script>
<body>
<jsp:include page="header.jsp"/>
<div class="box">
    <jsp:include page="nav.jsp"/>
    <div class="main">
        <div id="addBox" class="outbox">
            <form action="${pageContext.request.contextPath}/toInsertCategory" id="addForm" class="Form" method="post">
                <h2 style="text-align: center">添加商品分类</h2>
                分类名称：<input type="text" name="name" class="input">
                <br>
                <input type="submit" value="确认">
                <input type="reset" value="退出" onclick="quit(addBox)">
            </form>
        </div>
        <div id="updateBox" class="outbox">
            <form action="${pageContext.request.contextPath}/toUpdateCategory" id="updateForm" class="Form">
                <h2 style="text-align: center">修改分类名称</h2>
                分类id：<input type="text" name="id" class="input" readonly>
                <br>
                分类名称：<input type="text" name="name" class="input">
                <br>
                <input type="submit" value="确认">
                <input type="reset" value="退出" onclick="quit(updateBox)">
            </form>
        </div>
        <div style="margin: 10px auto;height: 20%;width: 500px;text-align: center" class="main_head">
            <button onclick="window.history.back()">返回商品页面</button>
            <button onclick="addButtonClick()">添加商品分类</button>
        </div>
        <table>
            <thead>
            <tr>
                <th>商品编号</th>
                <th>商品名称</th>
                <th>操作</th>
            </tr>
            </thead>
            <tbody>
            <c:forEach items="${sessionScope.categoryMap}" var="item" >
                <tr>
                    <td>${item.key}</td>
                    <td>${item.value}</td>
                    <td>
                        <button style="background-color:#E6A23C;color: white;border: #E6A23C" onclick="updateButtonClick(`${item.key}`,`${item.value}`)" >修改</button>
                        <button style="background-color: red;color: white;border: red" onclick="deleteButtonClick(`${item.key}`)">删除</button>
                    </td>
                </tr>
            </c:forEach>
            </tbody>
        </table>
    </div>
</div>
<jsp:include page="footer.jsp"/>
</body>
</html>
